<template>
    <div class="rate" @mouseleave="onMouseOut">
        <div 
         @mouseover="onMouseOver(idx)"
         @click="fn(idx)"
         :class="{
             circle:true,
             active:count >= idx
         }"
          v-for="(item,idx) in list" 
         :key="idx"> 
         </div>
         <div>{{ num }}</div>
         <div>{{ getNum() }}</div>
         <button @click="a++">点我电蚊拍</button>
         <div>{{ msg1 }}</div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            msg:'hello world',
            a:10,
            b:20,
            clickid:-1,
            count:-1,
            list:new Array(5).fill(false)
        }
    },
    methods: {
        onMouseOver(idx) {
            this.count = idx
        },
        onMouseOut() {
            this.count = this.clickid
        },
        fn(idx) {
            this.clickid = idx
        },
        getNum() {
            return this.a + this.b
        }
    },
    computed:{
        num () {
            return this.a + this .b
        },
        msg1() {
          return this.msg.split('').reverse().join('')
        }
    },
    // 创建后
   created () {
       console.log('创建');
   }, 
    //销毁后
    destroyed () {
        console.log('销毁');
    },
    activated () {
        console.log('激活');
    },
    deactivated () {
        console.log('失去激活');
    }
    
}
</script>

<style scoped>
    .circle {
        display: inline-block;
        width:100px;
        height:100px;
        border-radius: 50px;
        border:1px solid red;
        margin-left: 12px;
        font-size: 50px;
    }
    .circle.active{
      background-color: red;
    }
</style>